<template>
  <view class="document-detail">
    <u-navbar
      @click="backIndex"
      back-icon-color="#fff"
      title-color="#fff"
      title="文档详情"
      :background="background"
    >
    </u-navbar>
    <view class="card">
      <u-image
        class="document-type"
        width="60rpx"
        height="60rpx"
        :src="src"
      ></u-image>
      <view class="card-content" @click="handleViewDocument(item)">
        <text class="content">这是一个文档名称</text>
        <view class="card-info">
          <text class="content">200收藏</text>
          <text class="content">2024-6-24</text>
          <text class="content">1.3Mb</text>
        </view>
      </view>
      <u-button size="mini" type="primary">下载</u-button>
    </view>
    <view class="detail-wrap">
        <u-image
        class="document-type"
        width="100%"
        height="80%"
        :src="src"
      ></u-image>
    </view>
    <view class="footer">
        <u-button shape="circle" plain>展开查看更多</u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      background: {
        backgroundImage:
          "linear-gradient(45deg, rgb(28, 187, 180), rgb(141, 198, 63))",
      },
      src: "https://files.axshare.com/gsc/EWHZSG/6d/c0/8f/6dc08fb90f184d2da4edd89f009cec71/images/%E5%85%A8%E9%83%A8%E6%94%B6%E8%97%8F_1/u3.svg?pageId=45b2332e-a280-4b46-ae7a-fa92a4f1e4d4",
    };
  },
};
</script>

<style lang="scss" scoped>
.document-detail {
  padding: 12px;
  height: 100vh;
}
.card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-bottom: 16px;
  padding: 16px 8px;
  .card-content {
    flex: 1;
    padding: 0 16px;
  }
  .card-info {
    color: #666;
    display: flex;
    font-size: 14px;
    justify-content: space-between;
  }
}
.detail-wrap {
    height: calc(100% - 200px);
}
</style>
